<template>
	<div>
		<header-view></header-view>
    <swiper-view></swiper-view>
    <icons-view></icons-view>
	</div>
</template>

<script>
import HeaderView from './components/Header'
import SwiperView from './components/Swiper'
import IconsView from './components/Icons'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data (){
    return {
      lastCity:''
    }
  },
  computed :{
    ...mapState(['city'])
  },
 components:{
		HeaderView,
   SwiperView,
   IconsView
	},
  methods:{
    getData (res){
      if (res.data.ret && res.data.data){
        console.log(res.data.data);
      }
    }
  },
  mounted (){
    this.lastCity=this.city
    axios.get('/api/index.json?city='+this.city).then(this.getData)
    // axios.post('/api/allcolumn',{}).then(this.getData)

  },
  activated (){ //当路由中有keep-alive标签，生命周期中会多一个钩子，用来处理城市不同时页面数据的重新加载
    if(this.lastCity !=this.city){
      this.lastCity=this.city
      axios.get('/api/index.json?city='+this.city).then(this.getData)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
